<script type="text/javascript">//<![CDATA[
	function progressbar(v, m, pc, np) {
		m = m || 100

		return String.format(
			'<div style="width:100%%; max-width:500px; position:relative; border:1px solid #999999">' +
			'<div style="background-color:#CCCCCC; width:%d%%; height:15px">' +
			'<div style="position:absolute; left:0; top:0; text-align:center; width:100%%; color:#000000">' +
			'<small>%s / %s ' + (np == true ? "" : '(%d%%)') + '</small>' +
			'</div>' +
			'</div>' +
			'</div>', pc, v, m, pc
		);
	}

	function niceBytes(bytes, decimals) {
		if (bytes == 0) return '0 Bytes';
		var k = 1000,
			dm = decimals + 1 || 3,
			sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
			i = Math.floor(Math.log(bytes) / Math.log(k));
		return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
	}

	XHR.poll(5, '/cgi-bin/luci/admin/services/docker/container_stats/<%=self.container_id%>', { status: 1 },
		function (x, info) {
			var e;

			if (e = document.getElementById('cbi-table-cpu-value'))
				e.innerHTML = progressbar(
					(info.cpu_percent), 100, (info.cpu_percent ? info.cpu_percent : 0));
			if (e = document.getElementById('cbi-table-memory-value'))
				e.innerHTML = progressbar(
					niceBytes(info.memory.mem_useage),
					niceBytes(info.memory.mem_limit),
					((100 / (info.memory.mem_limit ? info.memory.mem_limit : 100)) * (info.memory.mem_useage ? info.memory.mem_useage : 0))
				);

			let num = 1
			for (var key in info.bw_rxtx) {
				if (!document.getElementById("cbi-table-network_" + key + "-value")) {
					let tab = document.getElementById("cbi-table-cpu").parentNode
					num++
					let div = document.getElementById('cbi-table-cpu').cloneNode(true);
					div.id = "cbi-table-network_" + key;
					div.children[0].innerHTML = "<%:Network TX/RX%>: " + key
					div.children[1].id = "cbi-table-network_" + key + "-value"
					tab.appendChild(div)
				}
				e = document.getElementById("cbi-table-network_" + key + "-value")
				e.innerHTML = progressbar(
					niceBytes(info.bw_rxtx[key].bw_tx),
					niceBytes(info.bw_rxtx[key].bw_rx),
					((100 / (info.bw_rxtx[key].bw_rx ? info.bw_rxtx[key].bw_rx : 100)) * (info.bw_rxtx[key].bw_tx ? info.bw_rxtx[key].bw_tx : 0)) > 100 ? 100 : Math.floor((100 / (info.bw_rxtx[key].bw_rx ? info.bw_rxtx[key].bw_rx : 100)) * (info.bw_rxtx[key].bw_tx ? info.bw_rxtx[key].bw_tx : 0)),
					true
				);
			}

		});
//]]></script>
